import React, { Component } from 'react';
import { StyleSheet, Image } from 'react-native';
import { createBottomTabNavigator, TabBarBottom, createMaterialTopTabNavigator  } from 'react-navigation';
import TabBarComponent from './../components/common/TabBar';

//主导航页面
import Home from './../page/home/home';
import Vip from './../page/vip/vip';
import Notice from './../page/notice/notice';
import My from './../page/my/my';

//主导航设置
export default createBottomTabNavigator(
    {
        home: {
            screen: Home,
            navigationOptions: () => ({
                //底部导航的文本
                tabBarLabel: `首页`,
                //底部导航的图标
                tabBarIcon: ({ focused }) => {
                    var imageIcon = require('./../assets/tabIcon/ic_home.png');
                    if(focused) {
                        imageIcon = require('./../assets/tabIcon/ic_home_active.png');
                    }
                    return <Image style={ styles.tabIcon } source={ imageIcon } />
                },
            }),
        },
        vip: {
            screen: Vip,
            navigationOptions: () => ({
                tabBarLabel: `会员`,
                tabBarIcon: ({ focused }) => {
                    var imageIcon = require('./../assets/tabIcon/ic_project.png');
                    if(focused) {
                        imageIcon = require('./../assets/tabIcon/ic_project_active.png');
                    }
                    return <Image style={styles.tabIcon} source={imageIcon} />
                },
            }),
        },
        publish: { // 占位用，此页面实际不会去调用
            screen: Component,
            navigationOptions: () => ({
                tabBarIcon: ({ focused }) => {
                    return <Image source={ require('./../assets/tabIcon/add.png') }  style={styles.centerIcon}/>
                }
            })
        },
        notice: {
            screen: Notice,
            navigationOptions: () => ({
                tabBarLabel: '通知',
                tabBarIcon: ({ focused }) => {
                    var imageIcon = require('./../assets/tabIcon/ic_order.png');
                    if (focused) {
                        imageIcon =  require('./../assets/tabIcon/ic_order_active.png');
                    }
                    return <Image style={ styles.tabIcon } source={imageIcon} />
                },
            }),
        },
        my: {
            screen: My,
            navigationOptions: () => ({
                tabBarLabel: `我的`,
                tabBarIcon: ({focused}) => {
                    var imageIcon = require('./../assets/tabIcon/ic_my.png');
                    if(focused) {
                        imageIcon = require('./../assets/tabIcon/ic_my_active.png');
                    }
                    return <Image style={styles.tabIcon} source={imageIcon} />
                },
            }),
        },
    },
    {
         tabBarComponent: props =>
            <TabBarComponent
                {...props}
                style={{ borderTopColor: '#000000' }}
            />,
        // //首次加载时显示的动画
        // initalRouteName: 'home',
        // tabBarComponent: TabBarBottom,
        // tabBarPosition: 'bottom',
        // tabBarOptions: {
        //     //当前选中的tab的文本颜色和图标颜色
        //     activeTintColor: '#000',
        //     //当前选中tab的背景颜色
        //     activeBackgroundColor: '#f5f5f5',
        //     //当前未选中的tab bar的文本颜色和图标颜色
        //     inactiveTintColor: '#666',
        //     //当前未选中tab的背景颜色
        //     // inactiveBackgroundColor: '#fff',
        //     //是否显示tab的文字
        //     showLabel: true,
        //     //是否显示tab的图标
        //     showIcon: true,
        //     //tab bar的样式
        //     style: {},
        //     //tab的样式对象
        //     tabStyle: {
        //         //backgroundColor: '#000',
        //         //borderTopColor: '#ccc',
        //     }
        // },
        // // 是否在切换tab页时使用动画
        // animationEnabled: true,
        // //是否允许滑动切换tab页
        // swipeEnabled: true,
        // //是否懒加载
        // lazy: true,
    }
)

const styles = StyleSheet.create({
    tabIcon: {
        width: 40,
        height: 40
    },
    centerIcon: {
        width: 50,
        height: 60,
        marginTop: -10
    }
})
